<template>
  <div id="app">

    <el-card
        style="width: 100%;">
      <el-descriptions class="margin-top" :column="2" title="设计" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-user"></i>
            协作人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            开始日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            截止日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>

        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            工作内容
          </template>
          <el-input></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-button @click="addNode()">添加工作节点</el-button>
    <div v-if="wrapperDivShow">
      <el-form>
        <el-form-item></el-form-item>
        <el-form-item></el-form-item>
        <el-form-item></el-form-item>
      </el-form>
    </div>

    <el-divider content-position="left"><span>1.方案设计</span></el-divider>
    <el-form ref="form" :model="schemeForm" label-width="120px">
      <el-form-item label="负责人">
        <el-input style="width: 22.5%"></el-input>
      </el-form-item>
      <el-form-item label="计划时间">
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际时间">
        <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="方案文件">
        <div style="width:100%; padding: 20px 0; border: 1px solid #E8EAF6; height: auto;">
          <el-form :label-positon="labelPosion" label-width="150px">
            <el-form-item label="1.方案示意图">
              <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                <el-button type="text">点击上传</el-button>

              </el-upload>
            </el-form-item>
            <el-form-item label="2.方案数模">
              <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                <el-button type="text">点击上传</el-button>

              </el-upload>
            </el-form-item>
            <el-form-item label="3.设计输入汇总表">
              <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                <el-button type="text">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="show = !show">发起评审</el-button>
      </el-form-item>
      <el-form-item label="方案评审" v-show="show" name="el-fade-in-linear">
        <div style="width:100%; border: 1px solid #E8EAF6; height: auto; padding:20px;
          display: flex; align-items: stretch; justify-content: left; box-sizing: border-box">
          <el-steps direction="vertical" :active="2" :space="80">
            <el-step>
            </el-step>
            <el-step>
            </el-step>
          </el-steps>
          <el-descriptions :column="2" border>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-user"></i>
                评审意见
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                根据评审意见更新后的方案设计文件
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form-item>
    </el-form>
    <el-divider content-position="left"><span>2.详细设计</span></el-divider>
    <el-form ref="form" :model="detailForm" label-width="120px">
      <el-form-item label="负责人">
        <el-input style="width: 22.5%"></el-input>
      </el-form-item>
      <el-form-item label="计划时间">
        <el-date-picker
            v-model="value3"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际时间">
        <el-date-picker
            v-model="value4"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="show2 = !show2">发起评审</el-button>
      </el-form-item>

      <el-form-item label="详细设计评审" v-show="show2" name="el-fade-in-linear">
        <div style="width:80%; border: 1px solid #E8EAF6; height: auto; padding:20px;
          display: flex; align-items: stretch; justify-content: left">
          <el-steps direction="vertical" :active="2" :space="80">
            <el-step>
            </el-step>
            <el-step>
            </el-step>
          </el-steps>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-user"></i>
                评审意见
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                根据评审意见更新后的方案设计文件
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form-item>
    </el-form>

    <el-form-item label="审批记录">
      <el-steps direction="vertical" :active="1" :space="70">
        <el-step title="1.提交(设计人)" description="说明：" style="font-size: 12px; font-weight: 100"></el-step>
        <el-step title="2.初审(技术负责人)" description="意见：" style="font-size: 12px; font-weight: 100"></el-step>
        <el-step title="3.审批(技术委员会)" description="意见：" style="font-size: 12px; font-weight: 100"></el-step>
      </el-steps>
    </el-form-item>

    <el-divider content-position="left"><span>3.绘制工程图</span></el-divider>
    <el-form ref="form" :model="drawForm" label-width="120px">
      <el-form-item label="负责人">
        <el-input style="width: 22.5%"></el-input>
      </el-form-item>
      <el-form-item label="计划时间">
        <el-date-picker
            v-model="value5"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际时间">
        <el-date-picker
            v-model="value6"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="show3 = !show3">发起评审</el-button>
      </el-form-item>

      <el-form-item label="图纸评审" v-show="show3" name="el-fade-in-linear">
        <div style="width:80%; border: 1px solid #E8EAF6; height: auto; padding:20px;
         display: flex; align-items: stretch; justify-content: left">
          <el-steps direction="vertical" :active="2" :space="80">
            <el-step>
            </el-step>
            <el-step>
            </el-step>
          </el-steps>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-user"></i>
                评审意见
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                根据评审意见更新后的方案设计文件
              </template>
              <el-button type="text">上传</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form-item>
    </el-form>
    <el-divider content-position="left"><span>4.提交投产文件</span></el-divider>
    <el-form ref="form" :model="productionForm" label-width="120px">
      <el-form-item label="上传投产文件">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button type="text" style="margin-right: 30px">点击上传</el-button>
          <span v-html="textTime"></span>
        </el-upload>
      </el-form-item>
      <el-form-item label="未完事项说明">
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1">
        </el-input>
      </el-form-item>
      <el-form-item label="审批记录">
        <div style="width:100%; border: 1px solid #E8EAF6; height: auto; padding:15px">
          <el-steps direction="vertical" :active="1" :space="80">
            <el-step title="1.提交(设计负责人)" description="说明："></el-step>
            <el-step title="2.初审(项目负责人、部门部长、主管领导)" description="意见："></el-step>
            <el-step title="3.审批(总经理)" description="意见："></el-step>
          </el-steps>
        </div>
      </el-form-item>
    </el-form>
    <el-divider content-position="left"><span>5.补充投产文件</span></el-divider>
    <el-form ref="form" label-width="120px">
      <el-form-item v-for="(item, index) in changesForm" :key="index" :label="'补充' + (index + 1)">
        <div style="border: 1px solid #E8EAF6">
          <el-form-item label="上传投产文件">
            <el-upload
                class="upload-demo"
                :action="item.upload.action"
                :on-preview="item.upload.onPreview"
                :on-remove="item.upload.onRemove"
                :before-remove="item.upload.beforeRemove"
                :multiple="item.upload.multiple"
                :limit="item.upload.limit"
                :on-exceed="item.upload.onExceed"
                :file-list="item.upload.fileList">
              <el-button type="text" style="margin-right: 30px">点击上传</el-button>
              <span v-html="textTime"></span>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="item.remark"></el-input>
          </el-form-item>
          <el-form-item label="审批记录">
              <el-steps direction="vertical" :active="1" :space="80" style="margin: 20px">
                <el-step v-for="(step, stepIndex) in item.steps" :key="stepIndex" :title="step.title"
                         :description="step.description"></el-step>
              </el-steps>
          </el-form-item>

          <el-button v-if="index > 0" @click="removeChanges(index)" style="margin: 20px 100px"><i class="el-icon-minus"></i>删除</el-button>

        </div>
      </el-form-item>
      <el-form-item>
        <el-button  @click="addChanges()"><i class="el-icon-plus"></i>继续添加</el-button>
      </el-form-item>
    </el-form>


    <el-divider content-position="left"><span>6.设计更改(仅设计负责人有权上传)</span>
    </el-divider>
    <el-form ref="form" :model="changesForm" label-width="120px">
      <el-form-item label="上传投产文件">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="productionForm.fileList">
          <el-button type="text" style="margin-right: 30px">点击上传</el-button>
          <span v-html="textTime"></span>
        </el-upload>
      </el-form-item>

      <el-form-item label="更改说明">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="上传图纸">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button type="text">点击上传</el-button>

        </el-upload>
      </el-form-item>
    </el-form>
    <el-divider content-position="left"><span>7.设计归档</span></el-divider>
    <el-form ref="form" :model="archivingForm" label-width="120px">
      <el-form-item label="提交时间">
        <el-date-picker v-model="value9">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="上传文件">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button type="text">点击上传</el-button>

        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit()">提交审批</el-button>
        <el-button type="primary" size="mini">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "DesiginView",
  data() {
    return {
      labelPosition: 'left',
      schemeForm: {},
      detailForm: {},
      drawForm: {},
      productionForm: {},
      changesForm: [
        {
          upload: {
            action: "https://jsonplaceholder.typicode.com/posts/",
            onPreview: this.handlePreview,
            onRemove: this.handleRemove,
            beforeRemove: this.beforeRemove,
            multiple: true,
            limit: 3,
            onExceed: this.handleExceed,
            fileList: this.fileList
          },
          // 备注
          remark: '',
          // 审批记录
          steps: [
            {title: '1.提交(设计负责人)', description: '说明：'},
            {title: '2.初审(项目负责人、部门部长、主管领导)', description: '意见：'},
            {title: '3.审批(总经理)', description: '意见：'}
          ]
        }],
      archivingForm: {},
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      value9: '',
      value10: '2024-02-27',
      show: false,
      show2: false,
      show3: false,
      show4: false,
      radio: "1",
      textTime: '<html><span style="color: #545454;font-size: 12px; font-style: italic">自动显示时间</span></html>'
    }
  },
  methods: {
    addChanges() {
      // 假设productionForm是一个数组，每个元素对应一个表单项
      this.changesForm.push({
        upload: {
          action: "https://jsonplaceholder.typicode.com/posts/",
          onPreview: this.handlePreview,
          onRemove: this.handleRemove,
          beforeRemove: this.beforeRemove,
          multiple: true,
          limit: 3,
          onExceed: this.handleExceed,
          fileList: this.fileList
        },
        remark: '',
        steps: [
          {title: '1.提交(设计负责人)', description: '说明：'},
          {title: '2.初审(项目负责人、部门部长、主管领导)', description: '意见：'},
          {title: '3.审批(总经理)', description: '意见��'}
        ]
      });
    },
    removeChanges(index) {
      this.changesForm.splice(index, 1);
    },
    onSubmit(){
      window.location.href='Manu'
    }
  }
}
</script>

<style scoped>
.el-divider {
  margin: 35px auto;
}

.el-divider span {
  font-size: 17px;
  font-weight: 100;
  color: #000;
}
</style>